<template>
	<view class="phone-login-container">
		<view class="login-content">
			<view class="login-header">
				<image class="hospital-logo" src="/static/hospital-logo.png" mode="aspectFit"></image>
				<text class="hospital-name">智慧医疗健康平台</text>
				<text class="welcome-text">手机快捷登录</text>
			</view>

			<view class="login-form">
				<view class="form-item">
					<image class="input-icon" src="/static/icon-phone.png" mode="aspectFit"></image>
					<input class="form-input" type="number" v-model="phoneNumber" @blur="checkPhoneExist"
						placeholder="请输入手机号码" maxlength="11" placeholder-class="input-placeholder" />
					<!-- 校验提示 -->
					<!-- <text v-if="phoneError" class="error-tip">{{ phoneError }}</text> -->
				</view>

				<view class="form-item captcha-item">
					<image class="input-icon" src="/static/icon-verification.png" mode="aspectFit"></image>
					<input class="form-input captcha-input" type="number" v-model="verificationCode"
						placeholder="请输入验证码" maxlength="6" placeholder-class="input-placeholder" />
					<button class="get-code-btn" :disabled="countdown > 0 || !isPhoneValid" @tap="getVerificationCode">
						{{ countdown > 0 ? `${countdown}s后重新获取` : '获取验证码' }}
					</button>
				</view>

				<button class="login-button" type="primary" :disabled="!canLogin" @tap="handleLogin">
					登 录
				</button>

				<view class="other-login-method">
					<text @tap="gotoAccountLogin">账号密码登录</text>
				</view>
			</view>

			<view class="login-footer">
				<text class="footer-copyright">©2025 智慧医疗健康平台</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		telExit,
		sendSmsCode,
		telLogin
	} from '@/api/user.js';
	import token from '../../utils/token';
	export default {
		data() {
			return {
				phoneNumber: '', // 电话号码
				verificationCode: '', // 验证码
				countdown: 0,
				timer: null,
				phoneError: '', // 手机号错误提示
				isPhoneValid: false // 手机号是否有效
			}
		},
		computed: {
			canLogin() {
				return this.isPhoneValid && this.verificationCode.length === 6
			}
		},
		methods: {
			// 检查手机号是否存在
			async checkPhoneExist() {
				if (!/^1[3-9]\d{9}$/.test(this.phoneNumber)) {
					this.phoneError = '手机号格式不正确'
					this.isPhoneValid = false
					return
				}

				const res = await telExit({
					phoneLogin: this.phoneNumber
				});
				//console.log("login",res)
				if (res.code === 1) {
					/* this.phoneError = '电话号码存在' */
					this.isPhoneValid = true
				} else {
					this.isPhoneValid = false
				}
			},

			// 获取验证码
			async getVerificationCode() {
				if (!this.isPhoneValid) {
					uni.showToast({
						title: '请先输入有效的手机号',
						icon: 'none'
					})
					return
				}

				// 开始倒计时
				this.countdown = 60
				this.timer = setInterval(() => {
					if (this.countdown <= 0) {
						clearInterval(this.timer)
						return
					}
					this.countdown--
				}, 1000)

				// 这里调用发送验证码API
				// api.sendSmsCode({ phone: this.phoneNumber })
				const res = await sendSmsCode({
					phoneLogin: this.phoneNumber
				})
				//console.log(res)
				if (res.code === 1) {
					uni.showToast({
						title: '验证码已发送',
						icon: 'success'
					})
				}

			},

			// 处理登录
			async handleLogin() {
				if (!this.canLogin) return

				uni.showLoading({
					title: '登录中...'
				})

				// 模拟登录请求
				const res = await telLogin({
					codeLogin: this.verificationCode,
					phoneLogin: this.phoneNumber
				})

				//console.log(res)
				if (res.code === 1) {
					setTimeout(() => {
						uni.setStorageSync('isLogin', true);
						token.setToken(res.data)
						uni.hideLoading()
						uni.showToast({
							title: '登录成功',
							icon: 'success'
						})
						uni.switchTab({
							url: '/pages/index/index'
						})
					}, 1500)
				} else if (res.code === -1) {
					uni.showToast({
						title: res.msg,
						icon: 'error'
					})
				} else if (res.code === -2) {
					uni.showToast({
						title: res.msg,
						icon: 'error'
					})
				} else {
					uni.showToast({
						title: '登录失败',
						icon: 'error'
					})
				}
			},

			// 切换到账号密码登录
			gotoAccountLogin() {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			}
		},

		beforeDestroy() {
			if (this.timer) clearInterval(this.timer)
		}
	}
</script>

<style lang="scss">
	page {
		height: 100%;
		background-color: #f8f8f8;
	}

	.phone-login-container {
		height: 100vh;
		display: flex;
		flex-direction: column;
		padding: 0 50rpx;
		box-sizing: border-box;
	}

	.login-content {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding: 80rpx 0 40rpx;
	}

	.login-header {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 80rpx;
	}

	.hospital-logo {
		width: 120rpx;
		height: 120rpx;
		margin-bottom: 20rpx;
	}

	.hospital-name {
		font-size: 36rpx;
		font-weight: bold;
		color: #1a73e8;
		margin-bottom: 10rpx;
	}

	.welcome-text {
		font-size: 32rpx;
		color: #333;
	}

	.login-form {
		flex: 1;
	}

	.form-item {
		position: relative;
		margin-bottom: 40rpx;
		border-bottom: 1rpx solid #e0e0e0;
		padding-bottom: 20rpx;
		display: flex;
		align-items: center;

		&.captcha-item {
			border-bottom: none;
			padding-bottom: 0;
		}
	}

	.input-icon {
		width: 36rpx;
		height: 36rpx;
		margin-right: 20rpx;
	}

	.form-input {
		flex: 1;
		height: 60rpx;
		font-size: 30rpx;
		color: #333;

		&.captcha-input {
			flex: none;
			width: 300rpx;
		}
	}

	.input-placeholder {
		color: #bbb;
		font-size: 28rpx;
	}

	.get-code-btn {
		width: 200rpx;
		height: 70rpx;
		line-height: 70rpx;
		background-color: #f0f9ff;
		color: #1a73e8;
		font-size: 26rpx;
		border-radius: 35rpx;
		border: none;

		&[disabled] {
			background-color: #f5f5f5;
			color: #999;
		}
	}

	.login-button {
		width: 100%;
		height: 90rpx;
		line-height: 90rpx;
		border-radius: 45rpx;
		background: linear-gradient(to right, #1a73e8, #4a90e2);
		color: #fff;
		font-size: 32rpx;
		margin-top: 80rpx;

		&[disabled] {
			opacity: 0.6;
		}
	}

	.other-login-method {
		text-align: center;
		margin-top: 40rpx;
		color: #1a73e8;
		font-size: 28rpx;
	}

	.login-footer {
		text-align: center;
		margin-top: 40rpx;
	}

	.footer-copyright {
		font-size: 24rpx;
		color: #999;
	}

	.error-tip {
		position: absolute;
		bottom: -40rpx;
		left: 70rpx;
		font-size: 24rpx;
		color: #ff4d4f;
	}

	.form-item {
		position: relative;
		margin-bottom: 60rpx;
		/* 增加下边距给错误提示留空间 */
	}

	.get-code-btn[disabled] {
		background-color: #f5f5f5 !important;
		color: #999 !important;
	}
</style>